<template>
	<view class="wocomplete">
		<view class="ag-topbg"></view>
		<view class="wocomplete-card">
			<view class="wocomplete-card__head">
				<view class="ag-womarker">{{firstChar(orderDetailData.WoType)}}</view>
				<view class="wocomplete-card__col">
					<view class="wocomplete-card__col-row">
						<text class="wocomplete-card__name">{{orderDetailData.WoType}}</text>
						<view class="wocomplete-card__no">{{orderDetailData.WoNum}}</view>
					</view>
					<view class="wocomplete-card__col-time">
						<text>总部派工：{{orderDetailData.AssignDate}}</text>
						<text>网点派工：{{orderDetailData.ServiceSiteAcceptDate}}</text>
					</view>
				</view>
			</view>

			<!-- 移机工单完工 /  退换机工单完工 -->
			<view v-if="true" class="wocomplete-card__body">
				<textarea class="wocomplete-card__remark" placeholder="完工备注" :value="OrderRremark" @input="changeOrderRremark"></textarea>
				<view class="wocomplete-addr">
					<text>换机：</text>
					<switch color="#3d85db" @change="switchReplacePart=$event.detail.value" />
				</view>
				<view v-if="switchReplacePart">
					<view class="wocomplete-addr">
						<view class="wocomplete-addr__label">新安装地址: {{orderDetailData.ProvinceName + orderDetailData.CityName}}</view>
						<!-- <AGInput placeholder="请选择所在区域" readonly dropdown /> -->
						<picker mode="selector" :range="areaList" :value="areaIndex" range-key="Name" @change="ChangeAreaList">
							<AGInput customStyle="margin-top:0px;" readonly dropdown placeholder="请选择所在区域" :value="areaList[areaIndex].Name" />
						</picker>
					</view>
					<AGInput placeholder="请输入详细地址" :value="addressDetail" @change="changeAddress" />
				</view>
				<view class="wocomplete-card__content1" v-for="(productItem , index) in orderDetailData.WoProuduct" :range-key="index"
				 :key="productItem.WoObjectId">
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>产品编码：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.ProductNum}}</text>
						</view>  
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>产品类型：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.ProdTypeGroup||""}}</text>
						</view>
					</view>
					<!-- 一行一个 -->
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>产品名称：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.ProductName}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>保修开始时间：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.WarrantyStartDate}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>保修结束时间：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.WarrantyEndDate}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>安装位置：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.InstallLocation||""}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>购机来源：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.PurchaseSourceText||""}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>购机卖场名称：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.PurchaseChanel||""}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>物流码：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.Barcode||""}}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<text>物流码有效性：</text>
						</view>
						<view class="ag-cell__value">
							<text>{{productItem.IsSerialValid||""}}</text>
						</view>
					</view>
					<AGInput icon="qrcode" placeholder="物流码" @openQrcode="onOpenQrcode(index, $event)" :value="productItem.Barcode"
					 :disabled="productItem.IsProductConfirmed" @onBlur="onBlurLogisticsCode(index,$event)" data-index="" />
					<AGInput icon="search" placeholder="产品" @openSearch="onOpenSearch(index)" :value="productItem.ProductNum"
					 :disabled="productItem.isDisplayProdInputField" />
					<AGInput icon="calender" placeholder="保修开始时间" @openCalender="onOpenPurchaseDate(index, e)" :value="productItem.PurchaseDate"
					 :disabled="productItem.IsProductConfirmed" />
					<uni-calendar ref="PurchaseDate" :insert="false" :lunar="true" :start-date="'2019-3-2'" @confirm="confirmPurchaseDate(index,$event)" />
					<button class="cu-btn lg primary block" @click="onAffirmProduct(index)">确认产品</button>


					<view v-if="switchReplacePart">
						<AGInput icon="qrcode" placeholder="新物流码" @openQrcode="onNewOpenQrcode(index, $event)" :value="NewProductList[index].Barcode"
						 @onBlur="onNewBlurLogisticsCode(index,$event)" data-index="" />
						<AGInput icon="search" placeholder="新产品" @openSearch="onNewOpenSearch(index)" :value="NewProductList[index].ProductNum"
						 :disabled="productItem.isDisplayProdInputField" />
						<picker mode="selector" :range="orderDetailData.SuitProductItemsList" :value="SuitProductItemsIndex" @change="ChangeSuitProduct">
							<AGInput customStyle="margin-top:0px;" readonly dropdown placeholder="套装产品组" :value="orderDetailData.SuitProductItemsList[SuitProductItemsIndex].ProductNum" />
						</picker>
						<view class="wocomplete-fix-row">
							<AGInput placeholder="安装位置" :value="NewProductList[index].InstallLocation" />
							<button class="cu-btn primary" data-value="厨房" :data-index="index" @click="onKitchen">厨房</button>
							<button class="cu-btn primary" data-value="客厅" :data-index="index" @click="onIivingRoom">客厅</button>
						</view>
					</view>
				</view>
				<!-- <AGInput placeholder="实际收款总金额（保内工单不显示）" /> -->
				<view class="wocomplete-fix-row" v-if="isShowActualReceiptAmountField">
					<text style="margin-left: 60rpx;">实际收款总金额：</text>
					<AGInput placeholder="实际收款总金额（保内工单不显示）" :value="ActualReceiptAmount" @change="onChangeActualReceiptAmount" width="30rpx" />
				</view>
			</view>
		</view>
		<view class="wocomplete-section">
			<view class="wocomplete-section__head">
				<view>现场图片</view>
				<navigator url="../../woupload/index" v-if="orderDetailData.WoItemPicture"><text class="cuIcon-upload">上传图片</text></navigator>
			</view>
			<scroll-view :scroll-x="true" class="wocomplete-listimage">
				<view class="wocomplete-listimage__inner">
					<image class="wocomplete-listimage__item" v-for="(picItem, picIndex) in orderDetailData.WoItemPicture" :key="picIndex"
					 :src="getImageBase64(picItem)" @tap="navToUploadImg" />
					<navigator url="../../woupload/index" v-if="!orderDetailData.WoItemPicture"><text class="cuIcon-upload">上传图片</text></navigator>
				</view>
			</scroll-view>
		</view>
		<view class="wocomplete-section">
			<view class="wocomplete-section__head">
				<view>完工处理状态</view>
			</view>
			<view class="wocomplete-listprocess">
				<view class="wocomplete-listprocess__item">
					<text class="wocomplete-listprocess__title">数据同步：{{orderDetailData.DataSyncStateName}}</text>
					<text class="wocomplete-listprocess__desc">{{orderDetailData.DataSyncInfo}}</text>
				</view>
				<view class="wocomplete-listprocess__divider"></view>
				<view class="wocomplete-listprocess__item">
					<text class="wocomplete-listprocess__title">完工处理：{{orderDetailData.FinishedHandleStateName}}</text>
					<text class="wocomplete-listprocess__desc">{{orderDetailData.FinishHandleInfo}}</text>
				</view>
			</view>
		</view>

		<view class="wocomplete-footer">
			<button class="cu-btn lg primary block plain" @click="onCancel">取消</button>
			<button class="cu-btn lg primary block" @click="onSumbit">提交</button>
		</view>
	</view>
</template>

<script>
	import AGInput from '@/components/AGInput';
	import replacebehavior from './replacebehavior';
	export default {
		mixins: [replacebehavior],
		components: {
			AGInput
		},
		data() {
			return {
				orderDetailId: "",
				orderDetailData: {},
				orderDataCache: {},
				OrderRremark:"",
				NewProductList: [],
				//是否换机
				switchReplacePart: false,
				//区域列表
				areaList: [],
				areaIndex: 0,
				//套装产品Index
				SuitProductItemsIndex: 0,
				//新安装位置
				NewInstallLocation: "",
				NewBarcode: "",
				NewProductNum: "",
				//实际收款金额是否显示
				isShowActualReceiptAmountField: false,
				//实际收款金额
				ActualReceiptAmount: "",
				NewProduct: {},
				addressDetail: "",
			}
		},
		filters: {

		},
		watch: {
			'orderDetailData': {
				handler(newval, oldval) {
					if (newval.hasOwnProperty("CityId") &&
						newval.CityId) {
						this.GetAddressList("ggd_county", newval.CityId);
					}
					if (newval.hasOwnProperty("WoProuduct") &&
						newval.WoProuduct.length > 0) {
						this.initData(newval);
						console.log(newval);
					}
				}
			},
			'NewProductList': {
				handler(newval, oldval) {
					debugger
					if (newval &&
						newval.length > 0) {
						this.NewProductList=newval;
						console.log(newval);
					}
				}
			},
		},
		onLoad(Option) {
			this.orderDetailId = Option.orderDetailId;
			console.log(this.orderDetailId);

			uni.$on('reLoadInstall', () => {
				this.GetOrderDataImg().then((succ) => {
					this.orderDetailData.WoItemPicture = succ;
				}, (err) => {
					console.log(err);
				})
			});

			//选择产品后刷新
			uni.$on('selectProdItem', (e) => {
				if (e.type == false) {
					let upProdItem = this.orderDetailData.WoProuduct[e.prodIndex];
					console.log(e.prodItem, upProdItem);
					let selectProdItem = e.prodItem;
					upProdItem.ProductNum = selectProdItem.Name;
					upProdItem.ProductName = selectProdItem.ProductNumber;
					upProdItem.ProductId = selectProdItem.ProductId;
					upProdItem.ProdTypeGroup = selectProdItem.ProductTypeName;
					upProdItem.WaterAnalysisFieldRequired = selectProdItem.WaterAnalysisFieldRequired;
					upProdItem.FaultyGroup = selectProdItem.proFaultyGroup;
					upProdItem.FaultyGroupName = selectProdItem.proFaultyGroupName;
					upProdItem.ProductImage = e.proImage;
				} else {
					this.NewProduct.ProductNum = selectProdItem.Name;
					this.NewProduct.ProductName = selectProdItem.ProductNumber;
					this.NewProduct.ProductId = selectProdItem.ProductId;
					this.NewProduct.ProdTypeGroup = selectProdItem.ProductTypeName;
					this.NewProduct.WaterAnalysisFieldRequired = selectProdItem.WaterAnalysisFieldRequired;
					this.NewProduct.FaultyGroup = selectProdItem.proFaultyGroup;
					this.NewProduct.FaultyGroupName = selectProdItem.proFaultyGroupName;
					this.NewProduct.ProductImage = e.proImage;
					this.NewProductList[e.prodIndex] = this.NewProduct;
				}
			});



			this.onLoadData();
		},
		methods: {
			onLoadData() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				this.GetOrderData();
			},
			
			//实际收款总额
			onChangeActualReceiptAmount(e) {
				this.ActualReceiptAmount = e;
				console.log(this.ActualReceiptAmount);
			},

			ChangeAreaList(e) {
				this.areaIndex = e.detail.value;
			},
			ChangeSuitProduct() {
				this.SuitProductItemsIndex = e.detail.value;
			},

			onOpenPurchaseDate(index, e) {
				let proItem = this.orderDetailData.WoProuduct[index];
				if (!proItem.IsProductConfirmed) {
					this.$refs.PurchaseDate[index].open();
				}
			},


			//保修时间
			confirmPurchaseDate(index, e) {
				console.log("时间", e);
				let prodItem = this.orderDetailData.WoProuduct[index];
				// 产品确认为 false
				if (prodItem.IsProductConfirmed == false) {
					prodItem.PurchaseDate = e.fulldate;
					console.log(index);
				} else {
					uni.showToast({
						title: "产品已确认",
						icon: "none"
					});
				}
			},
			//扫描物流码
			onOpenQrcode(index, e) {
				let prodItem = this.orderDetailData.WoProuduct[index];
				if (prodItem.IsProductConfirmed == true) {
					uni.showToast({
						title: "产品已确认,不能输入物流码",
						icon: "none"
					});
				} else {
					// 调起条码扫描
					uni.scanCode({
						scanType: 'barCode',
						success: (res) => {
							//console.log('条码类型：' + res.scanType);
							//console.log('条码内容：' + res.result);
							prodItem.Barcode = res.result;
							//let isCheckBarcode = productItem.isCheckBarcode;
							uni.showLoading({
								mask: true,
							})
							this.BarcodeValidCheckAsync(index, prodItem.Barcode)
								.then((succ) => {
									let data = succ;
									this.RefreshProduct(data, index, prodItem.Barcode);
								}, (err) => {
									uni.hideLoading();
									uni.showToast({
										title: "物流码验证失败",
										icon: "none",
										duration: 3000
									});
								});
						}
					});
				}
			},
			//产品
			onOpenSearch(index) {
				let prodItem = this.orderDetailData.WoProuduct[index];
				//console.log(prodItem.IsProductFill)
				if (!prodItem.IsProductConfirmed) {
					uni.navigateTo({
						url: `../../productlist/index?action=selectproduct&prodIndex=${index}`
					})
				} else {
					uni.showToast({
						title: "不能选择产品",
						icon: "none",
						mask: true,
						duration: 800
					})
				}
			},

			onAffirmProduct(index) {
				let prodItem = this.orderDetailData.WoProuduct[index];
				if (prodItem.IsProductConfirmed == true) {
					uni.showToast({
						title: "产品已确认,不能输入物流码",
						icon: "none"
					});
				} else {
					uni.showLoading({
						title: "确认产品中..",
						mask: true,
					})
					this.AffirmProduct(index);
					//console.log("确认产品");
				}
			},
			//物流码
			onBlurLogisticsCode(index, e) {
				//console.log(e);
				if (e.detail.value) {
					let productItem = this.orderDetailData.WoProuduct[index];
					let strOriBarcode = e.detail.value;
					let strBarcode = productItem.Barcode;
					let isCheckBarcode = productItem.isCheckBarcode;
					//debugger;
					if ((!isCheckBarcode) || (isCheckBarcode && strOriBarcode != strBarcode)) {
						uni.showLoading({
							mask: true,
						})
						this.BarcodeValidCheckAsync(index, strOriBarcode)
							.then((succ) => {
								let data = succ;
								this.RefreshProduct(data, index, strOriBarcode);
							}, (err) => {
								uni.hideLoading();
								uni.showToast({
									title: "物流码验证失败",
									icon: "none",
									duration: 2000
								});
							});
					}
				}
			},

			//厨房
			onKitchen(e) {
				let dataset = e.currentTarget.dataset;
				let Newindex = dataset.index;
				// this.NewProduct.InstallLocation = dataset.value;
				// this.NewProductList[Newindex] = this.NewProduct;
				let Newpro = this.NewProductList[Newindex];
				Newpro.InstallLocation=dataset.value;
				console.log("this.NewProductList",this.NewProductList);
			},
			//客厅
			onIivingRoom(e) {
				let dataset = e.currentTarget.dataset;
				let Newindex = dataset.index;
				let Newpro = this.NewProductList[Newindex];
				Newpro.InstallLocation=dataset.value;
				// this.NewProduct.InstallLocation = dataset.value;
				// this.NewProductList[Newindex] = this.NewProduct;
				console.log("this.NewProductList",this.NewProductList);
			},

			changeAddress(e) {
				this.addressDetail = e;
				console.log("this.addressDetail", this.addressDetail);
			},

			//扫描物流码
			onNewOpenQrcode(index, e) {
				let prodItem = this.orderDetailData.WoProuduct[index];

				// 调起条码扫描
				uni.scanCode({
					scanType: 'barCode',
					success: (res) => {
						//console.log('条码类型：' + res.scanType);
						//console.log('条码内容：' + res.result);
						debugger
						this.NewProductList[index].Barcode = res.result;
						//let isCheckBarcode = productItem.isCheckBarcode;
						uni.showLoading({
							mask: true,
						})
						this.BarcodeValidCheckAsync(index, this.NewProductList[index].Barcode)
							.then((succ) => {
								let data = succ;
								this.NewRefreshProduct(data, index, this.NewProductList[index].Barcode);
							}, (err) => {
								uni.hideLoading();
								uni.showToast({
									title: "物流码验证失败",
									icon: "none",
									duration: 3000
								});
							});
					}
				});

			},

			//物流码失去焦点时
			onNewBlurLogisticsCode(index, e) {
				//console.log(e);
				if (e.detail.value) {
					let productItem = this.orderDetailData.WoProuduct[index];
					let strOriBarcode = e.detail.value;
					let strBarcode = productItem.Barcode;
					let isCheckBarcode = productItem.isCheckBarcode;
					//debugger;
					if ((!isCheckBarcode) || (isCheckBarcode && strOriBarcode != strBarcode)) {
						uni.showLoading({
							mask: true,
						})
						this.BarcodeValidCheckAsync(index, strOriBarcode)
							.then((succ) => {
								let data = succ;
								this.NewRefreshProduct(data, index, strOriBarcode);
							}, (err) => {
								uni.hideLoading();
								uni.showToast({
									title: "物流码验证失败",
									icon: "none",
									duration: 2000
								});
							});
					}
				}
			},

			//新产品
			onNewOpenSearch(index) {
				let prodItem=this.NewProductList[index];
				//console.log(prodItem.IsProductFill)
				let type=true;
				debugger
				if (!prodItem.isDisplayProdInputField) {
					uni.navigateTo({
						url: `../../productlist/index?action=selectproduct&prodIndex=${index}&type=true`
					})
				} else {
					uni.showToast({
						title: "不能选择产品",
						icon: "none",
						mask: true,
						duration: 800
					})
				}
			},

			onCancel(e) {
				uni.navigateBack();
			},

			onSumbit(e) {
				this.SubmitOrder();
			},
			
			navToUploadImg(e) {
				uni.navigateTo({
					url: "../../woupload/index"
				})
			},
			
			changeOrderRremark(e) {
				this.OrderRremark = e.detail.value;
			},
		}
	}
</script>

<style lang="scss">
	@import '../index.scss';
</style>
